<template>
	<view class="edit-phone">
		<view class="input-box">
			<view class="input-line flex align-c">
				<view class="input-line-title fz16 mr10">
					手机号
				</view>
				<input type="password" style='width:0;height:0;min-height:0'/>
				<input type="text" autocomplete="off" style='width:0;height:0;min-height:0'/>
				<u-input v-model="phone" :clearable="false" placeholder='请输入手机号' maxlength='11' type="text" />
			</view>
			<view class="input-line flex align-c">
				<view class="input-line-title fz16 mr10">
					验证码
				</view>
				<u-input v-model="verification_code" :clearable="false" placeholder='请输入短信验证码' type="text" />
				<u-button class="get-code-box" @click='getCode' :throttle-time='throttle_time'
					:disabled='countdown!=60000'>{{showCountdown}}</u-button>
			</view>
			<view class="input-line flex align-c">
				<view class="input-line-title fz16 mr10">
					支付密码
				</view>
				<view class="payment-input-box">
					<view class="payment-input-overlay" @click="inputFocus"></view>
					<u-input type="number" :maxlength="6" :clearable="false" v-model="payment_password" placeholder='请输入支付密码' />
					<!-- <input  /> -->
				</view>
			</view>
		</view>
		<view class="controls-btn-box zhong">
			<u-button class="controls-btn" @click="setPaymentPassword" :throttle-time='2000'>保存</u-button>
		</view>
		<u-keyboard ref="uKeyboard" mode="number" @change="valChange" @backspace="backspace" :mask='false'
			v-model="is_show_keyboard"></u-keyboard>
	</view>
</template>

<script>
	import {
		sendVerificationCode,
		resetpay
	} from '@/network/loginAndMy.js'
	export default {
		data() {
			return {
				phone: '', // 手机号
				verification_code: '', // 验证码
				payment_password: '', // 支付密码
				code_time: null, // 验证码定时器
				countdown: 60000, // 验证码倒计时
				throttle_time: null, // 验证码按钮
				is_show_keyboard: false, // 是否显示数字键盘
			}
		},
		computed: {
			showCountdown() {
				return this.countdown == 60000 ? '发送验证码' : this.countdown / 1000
			},
		},
		mounted() {
			this.phone = uni.getStorageSync('phone')
		},
		methods: {
			// 获取验证码
			getCode() {
				if (this.contentVerify()) {
					this.throttle_time = 2000
					return
				}

				this.sendVerificationCode()
				this.throttle_time = 60000
				this.code_time = setInterval(() => {
					this.countdown = this.countdown - 1000
					if (this.countdown === 0) {
						clearInterval(this.code_time);
						this.countdown = 60000
						return
					}
				}, 1000)
			},

			// 发送验证码
			sendVerificationCode() {
				sendVerificationCode({
					userphone: this.phone
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '发送成功',
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},

			// 输入内容验证
			contentVerify(type) {
				if (this.phone == '') {
					uni.showToast({
						title: '手机号不可为空',
						duration: 2000,
						icon: 'none'
					});
					return true
				}

				let regu = /^1[3-9][0-9]{9}$/
				if (!regu.test(this.phone)) {
					uni.showToast({
						title: '请输入有效的手机号码',
						duration: 2000,
						icon: 'none'
					});
					return true
				}
				
				if (type == 1 && this.payment_password == '') {
					uni.showToast({
						title: '请输入支付密码',
						duration: 2000,
						icon: 'none'
					});
					return true
				}
				
				if (type == 1 && this.verification_code == '') {
					uni.showToast({
						title: '请输入验证码',
						duration: 2000,
						icon: 'none'
					});
					return true
				}

				return false
			},

			// 设置支付密码
			setPaymentPassword() {
				let pass=/^\d{6}$/
				let is_wer=pass.test(this.payment_password)
				if(!is_wer){
					uni.showToast({
						title: '支付密码只能设置6位',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				
				if (this.contentVerify(1)) return
				
				let params = {
					mobile: this.phone,
					newpassword: this.payment_password,
					captcha: this.verification_code
				}
				resetpay(params).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '设置成功',
							duration: 2000,
							icon: 'none',
							success: function(res) {
								setTimeout(()=>{
									uni.navigateBack({
										delta: 1
									});
								},2000)
							}
						});
					}
				})
			},
			
			// 输入框聚焦触发
			inputFocus() {
				this.is_show_keyboard = true
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				this.payment_password += val
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.payment_password.length) this.payment_password = this.payment_password.substr(0, this.payment_password.length - 1);
			},
		},
		beforeDestroy() {
			clearInterval(this.code_time);
		},
	}
</script>

<style lang="scss">
	.edit-phone {
		background: #F3F3F3;
		height: 100vh;
		padding: 20rpx 0 0;

		.input-box {
			padding: 0 30rpx;
			background-color: #ffffff;

			.input-line {
				height: 110rpx;
				width: 100%;
				box-sizing: border-box;
				border-bottom: 1rpx solid #EDEDED;

				.payment-input-box {
					position: relative;
					width: calc(100vw - 210rpx);

					.payment-input-overlay {
						position: absolute;
						width: 100%;
						height: 100%;
						z-index: 999;
						left: 0;
						top: 0;
					}
				}

				.input-line-title {
					width: 130rpx;
				}

				.get-code-box {
					width: 150rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
					border: 1rpx solid #E3BA5B;
					border-radius: 5rpx;
					color: #BB8422;
					margin: 0 !important;
					padding: 0 !important;
					font-size: 24rpx;
				}

				uni-button:after {
					content: " ";
					border: none !important;
				}
			}
		}

		.controls-btn-box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 140rpx;
			background-color: #ffffff;

			.controls-btn {
				border: none;
				margin: 0 !important;
				padding: 0 !important;
				font-size: 36rpx;
				color: #ffffff;
				background: linear-gradient(0deg, #b07412 0%, #e3ba5b 100%);
				border-radius: 10rpx;
				height: 90rpx;
				line-height: 90rpx;
				width: 690rpx;
			}

			uni-button:after {
				content: " ";
				border: none !important;
			}
		}
	}
</style>